<template>
	<view class="content">
		<view class="sign">
			<view class="sign-nav">
				<view class="left">
					<text class="title">签到赚权益币</text>
					<text class="text">签到中断会重新计算噢！</text>
				</view>
				<view class="right">
					<text class="text">已连续签到<text class="blue">{{ signTotal }}</text>/7天</text>
				</view>
			</view>
			<view class="sign-list">
				<view class="line"></view>
				<view class="sign-item" v-for="item in signList">
					<text class="step">{{ item.score }}币</text>
					<view class="is-sign">
						<image class="image" src="https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/20200910/7eb1f1c0-f347-11ea-8e62-5b13d426e46b.png" v-if="item.hasSign === 1"></image>
					</view>
					<text class="day">{{ item.day }}天</text>
				</view>
			</view>
			<view class="sign-btn" @tap="signSubmit()">
				<image class="image" src="https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/20200910/b240ddf0-f345-11ea-87db-5f9eb9381268.png"></image>
				<text class="text">{{ todayHasSign === 1 ? '今日已签到' : '签到' }}</text>
			</view>
		</view>
		<!-- #ifdef MP-ALIPAY -->
		<guess :loadMoreTime="loadMoreTime" :pluginOptions="pluginOptions"></guess>
		<!-- #endif -->
	</view>
</template>

<script>
	import { mapGetters } from 'vuex';
	export default {
		name: 'sign',
		data() {
			return {
				signList: [],
				todayHasSign: 0,
				signTotal: 0,
				pluginOptions: {
					pid: 'mm_99209738_956900411_110861050012', // 当前插件的淘客 pid 注意pid前后一定不能随意加空格！！！
					pageSize: 6, // 每页个数，默认 10
					maxPageNum: 10, // 最大页数，不设置时请求接口所有数据
				},
				loadMoreTime: 0
			}
		},
		onLoad() {
			this.getSignList();
			
			uni.reportAnalytics('enter_qiandao', {
				enter_qiandao: 1
			});
		},
		onShow() {
			this.$store.dispatch('addVisitRecordUnAuthorized', { pageType : 7 });
		},
		onHide() {
			uni.reportAnalytics('bg_qiandao', {
				bg_qiandao: 1
			});
		},
		computed: {
			...mapGetters(['stepUserInfo'])
		},
		methods: {
			// 获取待签列表
			getSignList() {
				this.signTotal = 0;
				this.$service.common.step.signList().then(res => {
					this.signList = res.list;
					res.list.forEach(item => {
						if (item.hasSign === 1) {
							this.signTotal++;
						}
					});
					this.todayHasSign = res.todayHasSign;
				})
			},
			// 确认签到
			signSubmit() {
				if (this.todayHasSign === 1) {
					uni.showToast({
						title: '今日已签到',
						icon: 'none'
					});
					return false;
				}
				this.$service.task.score.sign().then(res => {
					uni.showToast({
						title: '签到成功，获得' + res.score + '权益币奖励',
						icon: 'none'
					});
					this.getSignList();
					this.$store.dispatch('getStepUserInfo');

					uni.reportAnalytics('click_qiandao_cg', {
						click_qiandao_cg: 1
					});
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon: 'none'
					});
				})
			}
		},
		onReachBottom() {
			this.loadMoreTime = (this.loadMoreTime || 0) + 1;
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 100vh;
		padding-top: 42rpx;
		background: linear-gradient(to bottom, #4BA1FE, #f5f5f5 30%, #f5f5f5 100%);
		.sign {
			width: 706rpx;
			height: 360rpx;
			margin: 0rpx auto;
			background: #fff;
			border-radius: 16rpx;
			padding: 14rpx 16rpx;
			box-sizing: border-box;
			box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.16);
			margin-bottom: 30rpx;
			.sign-nav {
				font-size: 24rpx;
				margin-bottom: 20rpx;
				@include flexBox(space-between, flex-start);
				.left {
					@include flexBox(null, null, column);
					.title {
						font-size: 32rpx;
						margin-bottom: 4rpx;
						color: #333333;
					}
					.text {
						font-size: 24rpx;
						color: #666;
					}
				}
				.right {
					@include flexBox(null, flex-end, column);
					font-size: 24rpx;
					.title {
						margin-bottom: 10rpx;
					}
					.blue {
						color: #4BA1FE;
					}
				}
			}
			.sign-list {
				position: relative;
				@include flexBox(space-between);
				.line {
					height: 2rpx;
					width: 592rpx;
					background: #6EAAFF;
					position: absolute;
					left: 40rpx;
				}
				.sign-item {
					font-size: 24rpx;
					position: relative;
					@include flexBox(center, center, column);
					.step {
						color: #6EAAFF;
					}
					.is-sign {
						margin: 10rpx 0;
						width: 28rpx;
						height: 28rpx;
						background: #E2EEFF;
						border: 2rpx solid #6EAAFF;
						border-radius: 50%;
						position: relative;
						.image {
							width: 30rpx;
							height: 30rpx;
							left: -2rpx;
							top: -2rpx;
							position: absolute;
						}
					}
					.day {
						color: #666666;
						font-size: 20rpx;
					}
				}
			}
			.sign-btn {
				width: 256rpx;
				height: 106rpx;
				position: relative;
				margin: 20rpx auto;
				@include flexBox(center, center);
				.image {
					position: absolute;
					width: 100%;
					height: 100%;
				}
				.text {
					position: relative;
					font-size: 28rpx;
					color: #fff;
					margin-bottom: 14rpx;
				}
			}
		}
	}
</style>
